<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/facePrint.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="lib/reset.css"/>
    <script src="lib/testHelper.js"></script>
    <script src="tooltipTestHelper.js"></script>
</head>
<body>
<style>
    h1 {
        line-height: 60px;
        background: #360;
        text-align: center;
        font-weight: bold;
        color: #eee;
        font-size: 14px;
        margin: 0;
    }

    .chart {
        height: 350px;
    }
</style>


<h1>handle | time axis | x snap | init value: '2017-04-12' | tooltip not show | inside data zoom | animation auto |
    check blank</h1>
<div class="chart" id="handle-time-init"></div>
<h1>handle | category | check resize | should trigger hightlight | should link </h1>
<h1>press button: show tip, release button: hide tip</h1>
<div class="chart" id="handle-category"></div>
<h1>handle | value axis | x snap, y not-snap | has init handle value | tooltip.alwaysShowContent | y handle tooltip
    position should not overflow axispointer line | image icon</h1>
<div class="chart" id="handle-value-init"></div>
<h1>single coordinate system handle | tooltip time label should be consistent with axisPinter.label.formatter</h1>
<div class="chart" id="themeRiver"></div>
<h1>setOption in not merge mode: (1) drag handle (2) click the eye. Check: handle should be normal</h1>
<div class="chart" id="setOption-merge"></div>


<script>

    require([
        'echarts'
        // 'echarts/chart/scatter',
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/dataZoom',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            dataZoom: {
                type: 'inside',
                start: 20,
                end: 50
            },
            axisPointer: {
                triggerOn: 'none'
            }
        };
        var baseTop = 90;
        var height = 250;
        var gap = 50;
        makeTimeGrid(option, {
            grid: {left: 100, top: baseTop, height: height},
            xAxis: {
                axisPointer: {
                    show: true,
                    snap: true,
                    handle: {
                        show: true,
                        margin: 60
                    },
                    value: '2017-04-12', // init value
                    label: {
                        padding: [5, 10, 15, 20]
                    }
                }
            }
        });
        baseTop += height + gap;

        createChart('handle-time-init', echarts, option, baseTop + 100);
    })

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            tooltip: {
                triggerOn: 'none'
            },
            axisPointer: {
                link: {xAxisIndex: 'all'}
            }
        };
        var baseTop = 90;
        var height = 150;
        var gap = 100;
        makeCategoryGrid(option, {
            grid: {top: baseTop, height: height},
            xAxis: {
                axisPointer: {
                    handle: {show: true}
                }
            },
            yAxis: {name: 'no init handle value'}
        });
        baseTop += height + gap;
        makeCategoryGrid(option, {
            grid: {top: baseTop, height: height, left: '30%', width: '50%'},
            xAxis: {
                axisPointer: {
                    handle: {show: true},
                    value: 'category3'
                }
            },
            yAxis: {name: 'init handle value: "category3"'}
        });
        baseTop += height + gap;

        createChart('handle-category', echarts, option, baseTop + 100);
    });

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/scatter',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var option = {
            tooltip: {
                alwaysShowContent: true
            }
        };
        var baseTop = 90;
        var height = 150;
        var gap = 160;
        makeValueGrid(option, {
            grid: {left: 100, top: baseTop, height: height, left: 120, right: 120},
            xAxis: {
                axisPointer: {
                    handle: {show: true},
                    snap: true,
                    value: 600 // init value
                }
            },
            yAxis: {
                axisPointer: {
                    handle: {
                        show: true,
                        margin: 70
                    }
                }
            }
        });
        baseTop += height + gap;
        makeValueGrid(option, {
            grid: {left: 100, top: baseTop, height: height, left: 120, right: 120},
            xAxis: {
                position: 'top',
                axisPointer: {
                    handle: {
                        show: true,
                        icon: 'image://http://echarts.baidu.com/images/favicon.png'
                    },
                    snap: true,
                    value: 600 // init value
                }
            },
            yAxis: {
                inverse: true,
                position: 'right',
                axisLine: {
                    onZero: false
                },
                axisPointer: {
                    handle: {
                        show: true,
                        icon: 'image://http://echarts.baidu.com/images/favicon.png',
                        margin: 70
                    }
                }
            }
        });
        baseTop += height + gap;

        createChart('handle-value-init', echarts, option, baseTop + 100);
    })

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/themeRiver',
        // 'echarts/component/legend',
        // 'echarts/component/singleAxis',
        // 'echarts/component/tooltip',
    ], function (echarts) {

        var chart = echarts.init(document.getElementById('themeRiver'));

        var option = {

            tooltip: {
                triggerOn: 'none'
            },
            legend: {
                data: ['DQ', 'TY', 'SS', 'QG', 'SY', 'DD']
            },
            singleAxis: {
                axisTick: {},
                axisLabel: {},
                top: 100,
                bottom: 100,
                // position: 'top',
                type: 'time',
                axisPointer: {
                    handle: {show: true},
                    label: {
                        // formatter: '|{value}|',
                        formatter: function (params) {
                            return echarts.format.formatTime('yyyy-MM-dd', params.value);
                        }
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        opacity: 0.2
                    }
                }
            },
            series: [
                {
                    type: 'themeRiver',
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 20,
                            shadowColor: 'rgba(0, 0, 0, 0.8)'
                        }
                    },
                    data: [['2015/11/08', 10, 'DQ'], ['2015/11/09', 15, 'DQ'], ['2015/11/10', 35, 'DQ'],
                        // ['2015/11/11',38,'DQ'],['2015/11/12',22,'DQ'],['2015/11/13',16,'DQ'],
                        ['2015/11/14', 7, 'DQ'], ['2015/11/15', 2, 'DQ'], ['2015/11/16', 17, 'DQ'],
                        ['2015/11/17', 33, 'DQ'], ['2015/11/18', 40, 'DQ'], ['2015/11/19', 32, 'DQ'],
                        ['2015/11/20', 26, 'DQ'], ['2015/11/21', 35, 'DQ'], ['2015/11/22', 40, 'DQ'],
                        ['2015/11/23', 32, 'DQ'], ['2015/11/24', 26, 'DQ'], ['2015/11/25', 22, 'DQ'],
                        // ['2015/11/26',16,'DQ'],['2015/11/27',22,'DQ'],['2015/11/28',10,'DQ'],
                        ['2015/11/08', 35, 'TY'], ['2015/11/09', 36, 'TY'], ['2015/11/10', 37, 'TY'],
                        ['2015/11/11', 22, 'TY'], ['2015/11/12', 24, 'TY'], ['2015/11/13', 26, 'TY'],
                        ['2015/11/14', 34, 'TY'], ['2015/11/15', 21, 'TY'], ['2015/11/16', 18, 'TY'],
                        ['2015/11/17', 45, 'TY'], ['2015/11/18', 32, 'TY'], ['2015/11/19', 35, 'TY'],
                        ['2015/11/20', 30, 'TY'], ['2015/11/21', 28, 'TY'], ['2015/11/22', 27, 'TY'],
                        ['2015/11/23', 26, 'TY'], ['2015/11/24', 15, 'TY'], ['2015/11/25', 30, 'TY'],
                        ['2015/11/26', 35, 'TY'], ['2015/11/27', 42, 'TY'], ['2015/11/28', 42, 'TY'],
                        ['2015/11/08', 21, 'SS'], ['2015/11/09', 25, 'SS'], ['2015/11/10', 27, 'SS'],
                        ['2015/11/11', 23, 'SS'], ['2015/11/12', 24, 'SS'], ['2015/11/13', 21, 'SS'],
                        ['2015/11/14', 35, 'SS'], ['2015/11/15', 39, 'SS'], ['2015/11/16', 40, 'SS'],
                        ['2015/11/17', 36, 'SS'], ['2015/11/18', 33, 'SS'], ['2015/11/19', 43, 'SS'],
                        ['2015/11/20', 40, 'SS'], ['2015/11/21', 34, 'SS'], ['2015/11/22', 28, 'SS'],
                        // ['2015/11/23',26,'SS'],['2015/11/24',37,'SS'],['2015/11/25',41,'SS'],
                        // ['2015/11/26',46,'SS'],['2015/11/27',47,'SS'],['2015/11/28',41,'SS'],
                        // ['2015/11/08',10,'QG'],['2015/11/09',15,'QG'],['2015/11/10',35,'QG'],
                        // ['2015/11/11',38,'QG'],['2015/11/12',22,'QG'],['2015/11/13',16,'QG'],
                        ['2015/11/14', 7, 'QG'], ['2015/11/15', 2, 'QG'], ['2015/11/16', 17, 'QG'],
                        ['2015/11/17', 33, 'QG'], ['2015/11/18', 40, 'QG'], ['2015/11/19', 32, 'QG'],
                        ['2015/11/20', 26, 'QG'], ['2015/11/21', 35, 'QG'], ['2015/11/22', 40, 'QG'],
                        ['2015/11/23', 32, 'QG'], ['2015/11/24', 26, 'QG'], ['2015/11/25', 22, 'QG'],
                        ['2015/11/26', 16, 'QG'], ['2015/11/27', 22, 'QG'], ['2015/11/28', 10, 'QG'],
                        ['2015/11/08', 10, 'SY'], ['2015/11/09', 15, 'SY'], ['2015/11/10', 35, 'SY'],
                        ['2015/11/11', 38, 'SY'], ['2015/11/12', 22, 'SY'], ['2015/11/13', 16, 'SY'],
                        ['2015/11/14', 7, 'SY'], ['2015/11/15', 2, 'SY'], ['2015/11/16', 17, 'SY'],
                        ['2015/11/17', 33, 'SY'], ['2015/11/18', 40, 'SY'], ['2015/11/19', 32, 'SY'],
                        ['2015/11/20', 26, 'SY'], ['2015/11/21', 35, 'SY'], ['2015/11/22', 4, 'SY'],
                        ['2015/11/23', 32, 'SY'], ['2015/11/24', 26, 'SY'], ['2015/11/25', 22, 'SY'],
                        ['2015/11/26', 16, 'SY'], ['2015/11/27', 22, 'SY'], ['2015/11/28', 10, 'SY'],
                        ['2015/11/08', 10, 'DD'], ['2015/11/09', 15, 'DD'], ['2015/11/10', 35, 'DD'],
                        ['2015/11/11', 38, 'DD'], ['2015/11/12', 22, 'DD'], ['2015/11/13', 16, 'DD'],
                        ['2015/11/14', 7, 'DD'], ['2015/11/15', 2, 'DD'], ['2015/11/16', 17, 'DD'],
                        ['2015/11/17', 33, 'DD'], ['2015/11/18', 4, 'DD'], ['2015/11/19', 32, 'DD'],
                        ['2015/11/20', 26, 'DD'], ['2015/11/21', 35, 'DD'], ['2015/11/22', 40, 'DD'],
                        ['2015/11/23', 32, 'DD'], ['2015/11/24', 26, 'DD'], ['2015/11/25', 22, 'DD'],
                        ['2015/11/26', 16, 'DD'], ['2015/11/27', 22, 'DD'], ['2015/11/28', 10, 'DD']]
                }
            ]
        };

        createChart('themeRiver', echarts, option, 500);
    });

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/dataZoom',
        // 'echarts/component/toolbox',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var base = +new Date(1968, 9, 3);
        var oneDay = 24 * 3600 * 1000;
        var date = [];

        var data = [Math.random() * 300];

        for (var i = 1; i < 200; i++) {
            var now = new Date(base += oneDay);
            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
            data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
        }

        option = {
            animation: false,
            title: {
                left: 'center',
                text: '触屏 tooltip 和 dataZoom 示例',
                subtext: '"tootip" and "dataZoom" on mobile device',
            },
            legend: {
                top: 'bottom',
                data: ['意向']
            },
            tooltip: {
                triggerOn: 'none',
                position: function (pt) {
                    return [pt[0], 100];
                }
            },
            toolbox: {
                left: 'center',
                top: 10,
                itemSize: 40,
                feature: {
                    myMerge: {
                        show: true,
                        title: 'setOption in NOT merge mode',
                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                        onclick: function () {
                            chart.setOption(option, true);
                        }
                    }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisPointer: {
                    lineStyle: {
                        color: '#215F5A',
                        width: 2
                    },
                    label: {
                        show: true
                    },
                    handle: {
                        show: true
                    }
                },
                data: date
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            grid: {
                top: 70,
                left: 20,
                right: 30,
                containLabel: true,
                height: 150
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 10
            }],
            series: [
                {
                    name: '模拟数据',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color: '#8ec6ad'
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#8ec6ad'
                            }, {
                                offset: 1,
                                color: '#ffe'
                            }])
                        }
                    },
                    data: data
                }
            ]
        };

        var chart = createChart('setOption-merge', echarts, option, 400);
    });

</script>


</body>
</html>
